<template>
	<view class="newOrder">
		<view class="form">
			<view class="form_item">
				<view class="text"><text>*</text>客户:</view>
				<view class="input1">
					<input disabled v-model="user" type="text" />
					<!-- <view @tap="open" class="btn1"> 选择 </view> -->
				</view>
			</view>
			<view class="form_item">
				<view class="text"> 订单日期 :</view>
				<view class="input">
					<input v-model="time" @tap="show1 = true" type="text" />
					<!-- <input v-model="time" @tap="show1 = true" type="text" /> -->
				</view>
			</view>
			<view class="from_footer">
				<view class="form_item2">
					<view class="text"> 出货量: </view>
					<view class="input"> {{ ShipmenNum }} </view>
				</view>
				<view class="form_item2">
					<view class="text"> 出货金额:</view>
					<view class="input"> {{ ShipmenPrice | unifyNumber }} </view>
				</view>
				<view class="form_item2">
					<view class="text"> 退货量:</view>
					<view class="input"> {{ returnNum }} </view>
				</view>
				<view class="form_item2">
					<view class="text"> 退货金额: </view>
					<view class="input"> {{ returnPrice | unifyNumber}} </view>
				</view>
				<view class="form_item2">
					<view class="text2"> 总金额:</view>
					<view class="input"> {{ totalPrice | unifyNumber}} </view>
				</view>
			</view>
			<view class="btn">
				<button @tap="MergeData">合并数据</button>
				<button @tap="ExpandData">展开数据</button>
				<button @tap="
            redirectTo(
              `/pages/newOrder/index?orderIdSale=${orderIdSale}&type=${type}`
            )
          ">
					复制订单
				</button>
			</view>
			
			
			
			<image v-show="signUrl" ref="Print" style="width: 250rpx;
			  height: 250rpx;
			  padding: 10rpx;
			  margin-top: 20rpx;
			  background-color: transparent;
			  border-radius: 10rpx;"
			:src="signUrl" @tap="imgListPreview(signUrl)" alt=""
			/>
		
		
		
		
			<image v-show="orderUrl" style="
		  width: 250rpx;
		  height: 250rpx;
		  background: #f1f1f1;
		  padding: 10rpx;
		  margin-top: 20rpx;
		  margin-left: 20rpx;
		  border-radius: 10rpx;
		" :src="orderUrl" @tap="imgListPreview(orderUrl)" alt="" />
		</view>
		<view class="article">
			<view class="title">
				<view class="text">出货清单</view>
				<view class="btn"> </view>
			</view>

			<view class="article_table">
				<myTable :type="type" :proType="0" :data="list1" />
			</view>
		</view>
		<view class="article last">
			<view class="title">
				<view class="text">退货清单</view>
				<view class="btn"> </view>
			</view>
			<view class="article_table">
				<myTable :type="type" :proType="1" :data="list2" />
			</view>
		</view>
		<view class="footer_btn">
			<button @tap="cancel">作废</button>
			<button @tap="outOrder">打印订单</button>
		</view>
		<CustomerScreening ref="child" @saveUser="saveUser" />
		<!-- <u-calendar :show="show1" mode="single" @confirm="confirm"></u-calendar> -->
		<canvas  canvas-id="signCanvas" class="canvas"
					:style="'border:0px solid; width:375px; height:170px;'"></canvas>
	</view>
</template>

<script>
	import CustomerScreening from "../../components/CustomerScreening.vue";
	import myTable from "../../components/table.vue";
	// #ifndef MP-WEIXIN
	import ReplceInfo from "../../utils/repleceInfo.js"
	// #endif
	var app = getApp();
	export default {
		data() {
			return {
				// 步进器
				value: 1000,
				// 客户
				user: "",
				// 日历
				show1: false,
				// 日历
				time: "",
				signUrl: "",
				orderUrl: "",
				// 数据展示
				dataShow: true,
				// 出货清单
				list1: [],
				// 退货清单
				list2: [],
				// 出货清单
				list1copy: [],
				// 退货清单
				list2copy: [],
				newList1: [],
				newList2: [],
				// 数据展示
				dataShow: true,
				type: 0,
				orderIdSale: "",
				cid: "",
				stt: "",
				imageData:null,
			};
		},
		components: {
			CustomerScreening,
			myTable,
		},
		// watch:{
		//  "$store.state.ShipmentList":{
		//   handler:function(newV,oldV){
		//                   console.log(newV);
		//   },
		//   deep:true
		//  }
		// },
		computed: {
			// 出货量
			ShipmenNum() {
				var num = 0;
				if (this.list1) {
					this.list1.forEach((item) => {
						num += +item.orderNum;
					});
					return num;
				}
			},
			// 出货金额
			ShipmenPrice() {
				var total = this.list1.reduce((pre, cur) => {
					return pre + +cur.orderNum * +cur.realPrice;
				}, 0);
				return total;
			},
			// 退货量
			returnNum() {
				var num = 0;
				if (this.list2) {
					this.list2.forEach((item) => {
						num += +item.orderNum;
					});
					return num;
				}
			},
			// 退货金额
			returnPrice() {
				var total = this.list2.reduce((pre, cur) => {
					return pre + +cur.orderNum * +cur.realPrice;
				}, 0);
				return total;
			},
			// 总金额
			totalPrice() {
				return this.ShipmenPrice - this.returnPrice;
			},
		},
		methods: {
			redirectTo(url){
				uni.redirectTo({
					url
				})
			},
			imgListPreview(img) {
				var urlList = []
				urlList.push(img) //push中的参数为 :src="item.img_url" 中的图片地址
				uni.previewImage({
					indicator: "none",
					loop: true,
					urls: urlList,
					longPressActions: true
				})
			},
			outOrder() {
				let that = this;
				uni.getConnectedBluetoothDevices({
				  success(res) {
				    console.log(res)
					if(res.devices.length==0){
						uni.navigateTo({
							url: "/pages/setup/Bluetooth",
						});
						return
					}
					else{
						let contentFlag = uni.getStorageSync('contentFlag')
						if (contentFlag==1) {
							uni.showModal({
								content: '当前默认打印参数为标签打印，是否前往设置？',
								success: function(res) {
									if (res.confirm) {
										// console.log('用户点击确定');
										uni.navigateTo({
											url: "/pages/setup/Bluetooth"
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
							return
						}
						var deviceId =uni.getStorageSync('deviceId');
						if(deviceId == ""){
							uni.navigateTo({
								url: "/pages/setup/Bluetooth",
						    });
							return 
						}
						if(that.signUrl != ""){
							that.drow();
						}else{
							that.outDrow();
						}
					}
				  }
				})
				
			},
			// 打开客户筛选
			open() {
				this.$refs.child.open();
			},
			saveUser(data) {
				// console.log(data);
				this.user = data.cname;
				this.$refs.child.close();
			},
			// 日历
			confirm(e) {
				this.show1 = false;
				this.time = e[0];
			},
			// 合并数据
			MergeData() {
				if (this.list1.length > 1) {
					if (this.dataShow) {
						this.list1.forEach((item) => {
							item.orderNum = +item.orderNum;
							item.realPrice = +item.realPrice;
							var p = this.newList1.find((p) => p.proId == item.proId && p.realPrice == item
								.realPrice);
							if (p) {
								p.orderNum += item.orderNum;
								// p.realPrice += item.realPrice;
							} else {
								this.newList1.push(item);
							}
						});
						this.list1 = this.newList1;
						// 退货
						this.list2.forEach((item) => {
							item.orderNum = +item.orderNum;
							item.realPrice = +item.realPrice;
							var p = this.newList2.find((p) => p.proId == item.proId && p.realPrice == item
								.realPrice);
							if (p) {
								p.orderNum += item.orderNum;
								// p.realPrice += item.realPrice;
							} else {
								this.newList2.push(item);
							}
						});
						this.dataShow = false;
						this.list2 = this.newList2;
					}
				}
			},
			// 展开数据
			ExpandData() {
				this.newList1 = [];
				this.newList2 = [];
				if (!this.dataShow) {
					this.dataShow = true;
					if (this.type == "0") {
						this.$api
							.orderDetailApi({
								data: {
									orderIdSale: this.orderIdSale
								}
							})
							.then((res) => {
								this.list1 = res.result.sellList;
								this.list2 = res.result.returnList;
								this.user = res.result.orderSale.cname;
								this.time = res.result.orderSale.orderDay;
							});
					} else {
						this.$api
							.orderSaleTempListApi({
								data: {
									orderIdSale: this.orderIdSale
								}
							})
							.then((res) => {
								this.list1 = res.result.sellList;
								this.list2 = res.result.returnList;
								this.user = res.result.orderSale.cname;
								this.time = res.result.orderSale.orderDay;
							});
					}
				}
			},
			// 提交
			submit() {
				this.$api
					.orderCreateApi({
						cid: this.cid,
						details: this.list1,
						signUrl: "",
					})
					.then((res) => {
						console.log(res);
					});
				uni.showToast({
					title: "提交成功",
					icon: "none",
				});
			},
			// 挂单
			Registration() {
				this.$api
					.createSaveApi({
						cid: this.cid,
						details: this.list1,
						signUrl: "",
					})
					.then((res) => {
						if (res.code == 200) {
							console.log(res);
						}
					});
			},
			cancel() {
				let that = this
				uni.showModal({
					content: "确定要作废吗？",
					success(res) {
						// console.log(res)
						if (res.confirm) {
							that.$api.cancelApi({
								data: {
									orderIdSale: that.orderIdSale
								}
							}).then(res => {
								uni.navigateBack({
									delta: 1
								})
							})
						}
					}
				})

			},
	
			drow(){
				let that = this;
				uni.canvasGetImageData({
					canvasId: 'signCanvas',
					x: 0,
					y: 0,
					width: 200,
					height: 100,
					success: function(res) {
						console.log("获取画布数据成功" + res);
						that.imageData = res;
						that.outDrow();
					},
					complete: function(res) {
						console.log("finish");
					},
					fail: function(res) {
						
						uni.showToast({
							title: '获取画布数据失败',
							icon: 'none'
						});
					}
				}, that);
			},
			outDrow(){
				// #ifndef MP-WEIXIN
				let that = this;
				var jpPrinterObj = ReplceInfo.jpPrinterObj.createNew();
				let  totalPrice = 0;
				let P1 = that.list1.reduce((pre, cur) => {
					return pre + Number(cur.realPrice) * Number(cur.orderNum);
				}, 0)
				let P2 = that.list2.reduce((pre, cur) => {
					return pre + Number(cur.realPrice) * Number(cur.orderNum);
				}, 0)
				totalPrice = P1 - P2;
				let userInfo = app.globalData.userInfo;
				console.log(that.imageData)
				// return
				jpPrinterObj.printData({
					title: userInfo.mchCompany + " - 销售单",
					cname: that.user,
					orderTime: that.time,
					totalPrice: totalPrice,
					ShipmentList: that.list1,
					returnList: that.list2,
					imageData:that.imageData,
				})
				uni.navigateBack({
					delta:1
				})
				uni.showToast({
					title:"订单已打印",
					icon:"none"
				})
				// #endif
				
				
			}
		},
		onLoad(option) {
			// orderSaleTempListApi
			let that = this;
			this.type = option.type;
			this.orderIdSale = option.orderIdSale;
			this.cid = option.cid;
			if (option.type == 0) {
				this.$api
					.orderDetailApi({
						data: {
							orderIdSale: option.orderIdSale
						}
					})
					.then((res) => {
						// console.log(res);
						this.$store.state.ShipmentList = res.result.sellList || []
						this.list1 = this.$store.state.ShipmentList
						this.$store.state.returnList = res.result.returnList || []
						this.list2 = this.$store.state.returnList
						this.$store.state.ShipmentListCopy = res.result.sellList || []
						this.list1copy = this.$store.state.ShipmentListCopy = res.result.returnListCopy || []
						this.list2copy = this.$store.state.returnListCopy
						this.user = res.result.orderSale.cname;
						this.stt = res.result.orderSale.stt;
						this.time = res.result.orderSale.orderDay;
						// console.log(res.result.orderSale.signUrl);
						this.signUrl = res.result.orderSale.signUrl;
						if(this.signUrl == null)
							this.signUrl = "";
						this.orderUrl = res.result.orderSale.orderUrl;
						
						if(res.result.orderSale.signUrl != ""){
							// 绘制canvas
							uni.getImageInfo({
							    src: that.signUrl,
							    success: (res) => {
							    const ctx = uni.createCanvasContext('signCanvas', that);
								  // ctx.beginPath();
								ctx.setFillStyle('transparent'); // 默认白色
								ctx.fillRect(0, 0,200, 100) // fillRect(x,y,宽度，高度)
							    ctx.drawImage(res.path, 0, 0, 200,100);
							    ctx.draw();
							    }
							})
						}
						
					});
					
					
			} else {
				this.$api
					.orderSaleTempListApi({
						data: {
							orderIdSale: option.orderIdSale
						}
					})
					.then((res) => {
						// console.log(res);
						this.list1 = res.result.sellList;
						this.list2 = res.result.returnList;
						this.list1copy = res.result.sellList;
						this.list2copy = res.result.returnList;
						this.user = res.result.orderSale.cname;
						this.time = res.result.orderSale.orderDay;
						this.signUrl = res.result.orderSale.signUrl;
						this.orderUrl = res.result.orderSale.orderUrl;
					});
			}
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background: #f1f1f1;
		height: 100vh;
	}

	.newOrder {
		background-color: #f1f1f1;

		.form {
			padding: 38rpx 68rpx 32rpx 68rpx;
			background-color: #fff;

			// display: grid;
			// grid-template-columns:repeat(2,1fr);
			// grid-template-rows:repeat(2,1fr);
			// margin-top: 38rpx;
			.form_item {
				color: #bdbdbd;
				margin-bottom: 36rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.text {
					width: 30%;
					text-align: right;
					margin-right: 10rpx;

					text {
						color: #fe3430;
					}
				}

				.input {
					text-align: center;
					flex: 1;

					input {
						height: 64rpx;
						background: #f2f2f2;
						border-radius: 47rpx;
						text-align: left;
						text-indent: 1em;
						flex: 1;
					}
				}

				.input1 {
					text-align: center;
					flex: 1;
					display: flex;
					align-items: center;

					input {
						height: 64rpx;
						background: #f2f2f2;
						border-radius: 47rpx;
						text-align: left;
						text-indent: 1em;
						flex: 1;
						color: #000;
					}

					.btn1 {
						height: 61rpx;
						width: 145rpx;
						line-height: 61rpx;
						background: #fe3430;
						border-radius: 31rpx;
						color: #fff;
						margin-left: 36rpx;
						text-align: center;
					}
				}
			}

			.btn {
				display: flex;
				justify-content: space-between;

				button {
					height: 58rpx;
					line-height: 58rpx;
					background: #fe3430;
					border-radius: 49rpx;
					color: #fff;
					padding: 0 20rpx;
					// margin-left: 0;
					// margin-right: 10rpx;
				}
			}
		}

		.article {
			padding: 32rpx 17rpx;

			.title {
				margin-bottom: 18rpx;
				font-size: 1.125rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-weight: 600;

				// .text {
				// 	background-color: #cfc;
				// 	width: 600rpx;
				// }

				.btn {
					// margin-left: 266rpx;
					display: flex;

					button {
						height: 61rpx;
						width: 145rpx;
						line-height: 61rpx;
						background: #fe3430;
						border-radius: 31rpx;
						color: #fff;
						margin-left: 36rpx;
					}
				}
			}

			.article_table {
				background: #ffffff;
				// height: 274rpx;
				border-radius: 20rpx;
				padding: 12rpx;
				box-sizing: border-box;
				color: #272727;
				position: relative;

				.title {
					height: 100rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					border-bottom: 1px solid #f1f1f1;
				}

				.table_body {
					// background-color: #FE3430;

					.item {
						display: flex;
						justify-content: space-around;
					}
				}
			}
		}

		.last {
			margin-bottom: 180rpx;
		}

		.footer_btn {
			display: flex;
			position: fixed;
			bottom: 0rpx;
			margin-left: 50%;
			transform: translateX(-50%);
			background: #f1f1f1;
			width: 100%;
			padding: 30rpx 0;
			z-index: 999;

			button {
				background: url("/static/images/user/button.png");
				background-size: 220rpx 124rpx;
				width: 220rpx;
				height: 124rpx;
				line-height: 96rpx;
				color: #ffffff;
			}
		}
	}

	.from_footer {
		padding: 38rpx 30rpx 32rpx 30rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
		text-align: right;

		.form_item2 {
			color: #bdbdbd;
			margin-bottom: 36rpx;
			display: flex;
			align-items: right;
			line-height: 40rpx;
			height: 40rpx;

			.text2 {
				// width: 200rpx;
				// text-indent: 1em;
				font-size: 32rpx;
			}

			.input {
				// margin-left: 25rpx;
				// margin-top: 10rpx;
			}

			// justify-content: space-between;
		}
	}
	.canvas{
		position: absolute;
		top: -100000rpx;
	}
</style>
